<template>
  <div class="icon">
    <ul class="icon-list" ref="ulList">
      <li title="[微笑]">
        <img src="/face/0.gif" />
      </li>
      <li title="[嘻嘻]">
        <img src="/face/1.gif" />
      </li>
      <li title="[哈哈]">
        <img src="/face/2.gif" />
      </li>
      <li title="[可爱]">
        <img src="/face/3.gif" />
      </li>
      <li title="[可怜]">
        <img src="/face/4.gif" />
      </li>
      <li title="[挖鼻]">
        <img src="/face/5.gif" />
      </li>
      <li title="[吃惊]">
        <img src="/face/6.gif" />
      </li>
      <li title="[害羞]">
        <img src="/face/7.gif" />
      </li>
      <li title="[挤眼]">
        <img src="/face/8.gif" />
      </li>
      <li title="[闭嘴]">
        <img src="/face/9.gif" />
      </li>
      <li title="[鄙视]">
        <img src="/face/10.gif" />
      </li>
      <li title="[爱你]">
        <img src="/face/11.gif" />
      </li>
      <li title="[泪]">
        <img src="/face/12.gif" />
      </li>
      <li title="[偷笑]">
        <img src="/face/13.gif" />
      </li>
      <li title="[亲亲]">
        <img src="/face/14.gif" />
      </li>
      <li title="[生病]">
        <img src="/face/15.gif" />
      </li>
      <li title="[太开心]">
        <img src="/face/16.gif" />
      </li>
      <li title="[白眼]">
        <img src="/face/17.gif" />
      </li>
      <li title="[右哼哼]">
        <img src="/face/18.gif" />
      </li>
      <li title="[左哼哼]">
        <img src="/face/19.gif" />
      </li>
      <li title="[嘘]">
        <img src="/face/20.gif" />
      </li>
      <li title="[衰]">
        <img src="/face/21.gif" />
      </li>
      <li title="[委屈]">
        <img src="/face/22.gif" />
      </li>
      <li title="[吐]">
        <img src="/face/23.gif" />
      </li>
      <li title="[哈欠]">
        <img src="/face/24.gif" />
      </li>
      <li title="[抱抱]">
        <img src="/face/25.gif" />
      </li>
      <li title="[怒]">
        <img src="/face/26.gif" />
      </li>
      <li title="[疑问]">
        <img src="/face/27.gif" />
      </li>
      <li title="[馋嘴]">
        <img src="/face/28.gif" />
      </li>
      <li title="[拜拜]">
        <img src="/face/29.gif" />
      </li>
      <li title="[思考]">
        <img src="/face/30.gif" />
      </li>
      <li title="[汗]">
        <img src="/face/31.gif" />
      </li>
      <li title="[困]">
        <img src="/face/32.gif" />
      </li>
      <li title="[睡]">
        <img src="/face/33.gif" />
      </li>
      <li title="[钱]">
        <img src="/face/34.gif" />
      </li>
      <li title="[失望]">
        <img src="/face/35.gif" />
      </li>
      <li title="[酷]">
        <img src="/face/36.gif" />
      </li>
      <li title="[色]">
        <img src="/face/37.gif" />
      </li>
      <li title="[哼]">
        <img src="/face/38.gif" />
      </li>
      <li title="[鼓掌]">
        <img src="/face/39.gif" />
      </li>
      <li title="[晕]">
        <img src="/face/40.gif" />
      </li>
      <li title="[悲伤]">
        <img src="/face/41.gif" />
      </li>
      <li title="[抓狂]">
        <img src="/face/42.gif" />
      </li>
      <li title="[黑线]">
        <img src="/face/43.gif" />
      </li>
      <li title="[阴险]">
        <img src="/face/44.gif" />
      </li>
      <li title="[怒骂]">
        <img src="/face/45.gif" />
      </li>
      <li title="[互粉]">
        <img src="/face/46.gif" />
      </li>
      <li title="[心]">
        <img src="/face/47.gif" />
      </li>
      <li title="[伤心]">
        <img src="/face/48.gif" />
      </li>
      <li title="[猪头]">
        <img src="/face/49.gif" />
      </li>
      <li title="[熊猫]">
        <img src="/face/50.gif" />
      </li>
      <li title="[兔子]">
        <img src="/face/51.gif" />
      </li>
      <li title="[ok]">
        <img src="/face/52.gif" />
      </li>
      <li title="[耶]">
        <img src="/face/53.gif" />
      </li>
      <li title="[good]">
        <img src="/face/54.gif" />
      </li>
      <li title="[NO]">
        <img src="/face/55.gif" />
      </li>
      <li title="[赞]">
        <img src="/face/56.gif" />
      </li>
      <li title="[来]">
        <img src="/face/57.gif" />
      </li>
      <li title="[弱]">
        <img src="/face/58.gif" />
      </li>
      <li title="[草泥马]">
        <img src="/face/59.gif" />
      </li>
      <li title="[神马]">
        <img src="/face/60.gif" />
      </li>
      <li title="[囧]">
        <img src="/face/61.gif" />
      </li>
      <li title="[浮云]">
        <img src="/face/62.gif" />
      </li>
      <li title="[给力]">
        <img src="/face/63.gif" />
      </li>
      <li title="[围观]">
        <img src="/face/64.gif" />
      </li>
      <li title="[威武]">
        <img src="/face/65.gif" />
      </li>
      <li title="[奥特曼]">
        <img src="/face/66.gif" />
      </li>
      <li title="[礼物]">
        <img src="/face/67.gif" />
      </li>
      <li title="[钟]">
        <img src="/face/68.gif" />
      </li>
      <li title="[话筒]">
        <img src="/face/69.gif" />
      </li>
      <li title="[蜡烛]">
        <img src="/face/70.gif" />
      </li>
      <li title="[蛋糕]">
        <img src="/face/71.gif" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    $(this.$refs.ulList)
      .children()
      .on("click", this.iconClick);
  },
  methods: {
    iconClick(e) {
      this.$emit(
        "update:InputValue",
        this.InputValue + e.currentTarget.innerHTML
      );
      this.$emit("update:IsShowiconList", false);
    }
  },
  props: ["InputValue", "IsShowiconList"]
};
</script>

<style lang='scss'>
.icon {
  padding: 0;
  background-color: #fff;
  color: #666;
  box-shadow: none;
  line-height: 22px;
  min-width: 12px;
  font-size: 12px;
  border-radius: 2px;
  height: 100%;
  .icon-list {
    position: relative;
    width: 372px;
    padding: 10px;
    border: 1px solid #d9d9d9;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    clear: both;
    height: 100%;
    li {
      cursor: pointer;
      float: left;
      border: 1px solid #e8e8e8;
      height: 22px;
      width: 26px;
      overflow: hidden;
      margin: -1px 0 0 -1px;
      padding: 4px 2px;
      text-align: center;
      box-sizing: content-box;
    }
  }
}
</style>